<template>
	<view class="page-body">
		<!-- 页面内容开始 -->

		<!-- 表格搜索组件开始 -->
		<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns" @search="search"></vk-data-table-query>
		<!-- 表格搜索组件结束 -->

		<!-- 自定义按钮区域开始 -->
		<view>
			<el-row>
				<!-- 批量操作 -->
				<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
					<el-button type="danger" size="small" style="margin-left: 20rpx" :disabled="table1.multipleSelection.length === 0">
						批量操作
						<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="1">批量完成</el-dropdown-item>
						<el-dropdown-item :command="2">批量删除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-row>
		</view>
		<!-- 自定义按钮区域结束 -->

		<!-- 表格组件开始 -->
		<vk-data-table
			ref="table1"
			:action="table1.action"
			:columns="table1.columns"
			:query-form-param="queryForm1"
			:right-btns="['detail_auto']"
			:selection="true"
			:row-no="true"
			:pagination="true"
			:custom-right-btns="table1.customRightBtns"
			right-btns-align="right"
			@update="updateBtn"
			@delete="deleteBtn"
			@current-change="currentChange"
			@selection-change="selectionChange"
		></vk-data-table>
		<!-- 表格组件结束 -->

		<!-- 添加或编辑的弹窗开始 -->
		<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="500px" mode="form" :close-on-click-modal="false">
			<vk-data-form
				v-model="form1.data"
				:rules="form1.props.rules"
				:action="form1.props.action"
				:form-type="form1.props.formType"
				:columns="form1.props.columns"
				label-width="80px"
				@success="
					form1.props.show = false;
					refresh();
				"
			></vk-data-form>
		</vk-data-dialog>
		<!-- 添加或编辑的弹窗结束 -->

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var originalForms = {}; // 表单初始化数据

export default {
	data() {
		// 页面数据变量
		return {
			// 页面是否请求中或加载中
			loading: false,
			// init请求返回的数据
			data: {},
			// 表格相关开始 -----------------------------------------------------------
			table1: {
				// 表格数据请求地址
				action: 'admin/pages/sys/admin/getList',
				// 表格字段显示规则
				columns: [
					{ key: 'nickname', title: '用户昵称', type: 'text', width: 200 },
					{ key: 'user_id', title: '用户id', type: 'text', width: 200 },
					{ key: 'questionValue', title: '问题描述', type: 'text', width: 200 },
					{
						key: 'headindex',
						title: '问题类型',
						type: 'tag',
						width: 120,
						size: 'small',
						data: [
							{ value: 1, label: '播放问题', tagType: 'warning' },
							{ value: 2, label: '充值问题', tagType: 'error' }
						]
					},

					// { key: 'bodyindex', title: '补充描述', type: 'text', width: 200 },
					{
						key: 'bodyindex',
						title: '补充描述',
						type: 'radio',
						width: 120,

						data: [
							{ value: 0, label: '未选择' },
							{ value: 1, label: '播放卡顿' },
							{ value: 2, label: '黑屏' },
							{ value: 3, label: '无声音' },
							{ value: 4, label: '无法充值' },
							{ value: 5, label: '没有到账' },
							{ value: 6, label: '其他问题' }
						]
					},
					{ key: 'lxfs', title: '联系方式', type: 'text', width: 150 },
					{
						key: '',
						title: '剧目信息',
						type: 'group',
						minWidth: 150,
						align: 'left',
						columns: [
							{ key: 'dramaId', title: '剧目id', type: 'text', width: 150 },
							{ key: 'tvName', title: '剧名', type: 'text', width: 150 }
						]
					},

					{
						key: 'status',
						title: '处理状态',
						type: 'tag',
						width: 120,
						size: 'small',
						data: [
							{ value: 1, label: '已处理', tagType: 'success' },
							{ value: 0, label: '未处理', tagType: 'danger' }
						]
					},
					{ key: 'agent_id', title: '代理商id', type: 'text', width: 200 },
					{ key: '_add_time', title: '添加时间', type: 'date', width: 200 },
					{ key: 'update_time', title: '完成时间', type: 'date', width: 200 }
				],
				customRightBtns: [
					{
						title: '完成',
						type: 'primary',
						icon: 'el-icon-edit',
						disabled: 'status==1',
						onClick: (item) => {
							console.log('22222', item);
							vk.callFunction({
								url: 'admin/pages/sys/admin/update',
								title: '请求中...',
								data: {
									_id: item._id
								}
							}).then((res) => {
								item.status = 1;
								item.update_time = res.update_time;
							});
						}
					}
				],
				// 多选框选中的值
				multipleSelection: [],
				// 当前高亮的记录
				selectItem: ''
			},
			// 表格相关结束 -----------------------------------------------------------
			// 表单相关开始 -----------------------------------------------------------
			// 查询表单请求数据
			queryForm1: {
				// 查询表单数据源，可在此设置默认值
				formData: {},
				// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
				columns: [
					{
						key: 'headindex',
						title: '问题类型',
						type: 'select',
						width: 200,
						data: [
							{ value: 1, label: '播放问题' },
							{ value: 2, label: '充值问题' }
						],
						mode: '='
					},

					{
						key: 'status',
						title: '处理状态',
						type: 'select',
						width: 200,
						data: [
							{ value: 1, label: '已处理' },
							{ value: 0, label: '未处理' }
						],
						mode: '='
					},
					{
						key: 'bodyindex',
						title: '补充描述',
						type: 'select',
						width: 200,
						data: [
							{ value: 0, label: '未选择' },
							{ value: 1, label: '播放卡顿' },
							{ value: 2, label: '黑屏' },
							{ value: 3, label: '无声音' },
							{ value: 4, label: '无法充值' },
							{ value: 5, label: '没有到账' },
							{ value: 6, label: '其他问题' }
						],
						mode: '='
					},
					{ key: 'agent_id', title: '代理商id', type: 'text', width: 200, mode: '=' },

					{ key: 'user_id', title: '用户id', type: 'text', width: 200, mode: '=' },
					{ key: 'tvName', title: '剧名', type: 'text', width: 200, mode: '=' }
				]
			},

			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {},
				// 表单属性
				props: {
					// 表单请求地址
					action: '',
					// 表单字段显示规则
					columns: [
						{ key: 'questionValue', title: '问题描述', type: 'text', width: 200 },
						{ key: 'headindex', title: '问题类型', type: 'text', width: 200, data: [{}, {}, {}] },
						{ key: 'bodyindex', title: '问题选项', type: 'text', width: 200 },
						{ key: 'lxfs', title: '联系方式', type: 'number', width: 200 },
						{ key: '_add_time', title: '添加时间', type: 'text', width: 200 },
						{ key: 'update_time', title: '修改时间', type: 'text', width: 200 },
						{ key: 'status', title: '处理状态', type: 'text', width: 200, data: [{}, {}] },
						{ key: 'nickname', title: '用户昵称', type: 'text', width: 200 },
						{ key: 'user_id', title: '用户id', type: 'text', width: 200 }
					],
					// 表单验证规则
					rules: {},
					// add 代表添加 update 代表修改
					formType: '',
					// 是否显示表单的弹窗
					show: false
				}
			},
			// 其他弹窗表单
			formDatas: {}
			// 表单相关结束 -----------------------------------------------------------
		};
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		that = this;
		vk = that.vk;
		that.options = options;
		that.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			originalForms['form1'] = vk.pubfn.copyObject(that.form1);
		},
		// 页面跳转
		pageTo(path) {
			vk.navigateTo(path);
		},
		// 表单重置
		resetForm() {
			vk.pubfn.resetForm(originalForms, that);
		},
		// 搜索
		search() {
			that.$refs.table1.search();
		},
		// 刷新
		refresh() {
			that.$refs.table1.refresh();
		},
		// 获取当前选中的行的数据
		getCurrentRow() {
			return that.$refs.table1.getCurrentRow();
		},
		// 监听 - 行的选中高亮事件
		currentChange(val) {
			that.table1.selectItem = val;
		},
		// 当选择项发生变化时会触发该事件
		selectionChange(list) {
			that.table1.multipleSelection = list;
		},
		// 显示添加页面
		addBtn() {
			that.resetForm();
			that.form1.props.action = 'admin/pages/sys/admin/add';
			that.form1.props.formType = 'add';
			that.form1.props.title = '添加';
			that.form1.props.show = true;
		},
		// 显示修改页面
		updateBtn({ item }) {
			that.form1.props.action = 'admin/pages/sys/admin/update';
			that.form1.props.formType = 'update';
			that.form1.props.title = '编辑';
			that.form1.props.show = true;
			that.form1.data = item;
		},
		// 删除按钮
		deleteBtn({ item, deleteFn }) {
			deleteFn({
				action: 'admin/pages/sys/admin/delete',
				data: {
					_id: item._id
				}
			});
		},
		// 监听 - 批量操作的按钮点击事件
		batchBtn(index) {
			switch (index) {
				case 1:
					console.log('multipleSelection', this.table1.multipleSelection);
					vk.callFunction({
						url: 'admin/pages/sys/admin/updataList',
						title: '请求中...',
						data: {
							msgs: this.table1.multipleSelection.map((item) => item._id)
						},
						success: (data) => {
							console.log('执行完成');
							this.refresh();
						}
					});
					break;
				case 2:
					console.log('multipleSelection', this.table1.multipleSelection);
					vk.callFunction({
						url: 'admin/pages/sys/admin/delete',
						title: '请求中...',
						data: {
							msgs: this.table1.multipleSelection.map((item) => item._id)
						},
						success: (data) => {
							console.log('执行完成');
							this.refresh();
						}
					});
					break;
				default:
					break;
			}
		}
	},
	// 监听属性
	watch: {},
	// 过滤器
	filters: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.page-body {
}
</style>
